/** @type {HTMLCanvasElement} */
const canvas: any = document.getElementById('canvas')
const ctx = canvas.getContext('2d')

/**
 * 获取给定范围内的随机数
 * @param min 最小值
 * @param max 最大值
 * @returns 范围随机数
 */
function getRandom(min: number, max: number): number {
  return Math.floor(Math.random() * (max + 1 - min) + min)
}

// 原始尺寸 = 样式尺寸 * 缩放倍率(devicePixelRatio)

init()
// canvas 初始化
function init(): void {
  canvas.height = window.innerHeight * devicePixelRatio
  canvas.width = window.innerWidth * devicePixelRatio
}

// 画点
class Point {
  r: number = 6  // 半径
  x: number
  y: number
  xSpeed: number  // 移动速度
  ySpeed: number
  lastDrawTime: number | null   // 上一次画点时间

  constructor() {
    this.r = 6
    this.x = getRandom(0, canvas.width - this.r / 2)
    this.y = getRandom(0, canvas.height - this.r / 2)
    this.xSpeed = getRandom(-50, 50)
    this.ySpeed = getRandom(-50, 50)
    this.lastDrawTime = null
  }

  draw() {
    if (this.lastDrawTime) {
      // 计算新的坐标
      const duration = (Date.now() - this.lastDrawTime) / 1000  // 时间差
      const xDis = this.xSpeed * duration
      const yDis = this.ySpeed * duration

      let x = this.x + xDis
      let y = this.y + yDis
      // x轴边界
      if (x > canvas.width - this.r / 2) {
        x = canvas.width - this.r / 2
        this.xSpeed = -this.xSpeed
      } else if (x < 0) {
        x = 0
        this.xSpeed = -this.xSpeed
      }

      // y轴边界
      if (y > canvas.height - this.r / 2) {
        y = canvas.height - this.r / 2
        this.ySpeed = -this.ySpeed
      } else if (y < 0) {
        y = 0
        this.ySpeed = -this.ySpeed
      }

      // 更新坐标
      this.x = x
      this.y = y
    }

    ctx.beginPath();
    ctx.arc(this.x, this.y, this.r, 0, 2 * Math.PI, false);
    ctx.fillStyle = "rgba(200,200,200)";
    ctx.fill();

    // 保存画点时间
    this.lastDrawTime = Date.now()
  }
}

// 画线
class Graph {
  points: Array<any>
  maxDis: number

  constructor(pointNumber: number = 10, maxDis: number = 500) {
    this.points = new Array(pointNumber).fill(0).map(() => new Point())
    this.maxDis = maxDis
  }

  draw() {
    requestAnimationFrame(() => {
      this.draw()
    })

    ctx.clearRect(0, 0, canvas.width, canvas.height)

    for (let i = 0; i < this.points.length; i++) {
      const p = this.points[i];

      p.draw()
      for (let j = i + 1; j < this.points.length; j++) {
        const p1 = this.points[j]
        const d = Math.sqrt((p.x - p1.x) ** 2 + (p.y - p1.y) ** 2)

        if (d > this.maxDis) {
          continue;
        }

        ctx.beginPath();
        ctx.moveTo(p.x, p.y);
        ctx.lineTo(p1.x, p1.y);
        ctx.strokeStyle = `rgba(200,200,200,${1 - d / this.maxDis})`;
        ctx.stroke();
      }
    }
  }
}

const g = new Graph(30)
g.draw()

/* const p1 = new Point()
const p2 = new Point()

p1.drow()
p2.drow() */

/* // 线条
ctx.beginPath();
ctx.moveTo(60, 60);
ctx.lineTo(160, 160);
ctx.strokeStyle = "#fff";
ctx.stroke();

// 头圆
ctx.beginPath();
ctx.arc(60, 60, 5, 0, 2 * Math.PI, false);
ctx.fillStyle = "#fff";
ctx.fill();

// 尾圆
ctx.beginPath();
ctx.arc(160, 160, 5, 0, 2 * Math.PI, false);
ctx.fillStyle = "#fff";
ctx.fill(); */

